<!DOCTYPE html>
<html style="font-size: 95.75px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>用电信息大数据统计分析</title>
    <script type="text/javascript" src="./src/jquery.js"></script>
    <link rel="stylesheet" href="./src/comon0.css">
    <link rel="stylesheet" href="./src/iconfont.css">
    <script type="text/javascript">
        $(document).ready(function(){

            var html_b=$("#boxall_b .wrap ul").html()
            $("#boxall_b .wrap ul").append(html_b)
            var ls_b=$("#boxall_b .wrap li").length/2+1
            i_b=0
            ref = setInterval(function(){
                i_b++
                if(i_b==ls_b){
                    i_b=1;
                    $("#boxall_b .wrap ul").css({marginTop:0})
                    $("#boxall_b .wrap ul").animate({marginTop:-'.43'*i_b+'rem'},1000)
                }
                $("#boxall_b .wrap ul").animate({marginTop:-'.43'*i_b+'rem'},1000)
            },5400);

        })
    </script>

    <script type="text/javascript" src="./src/echarts.min.js"></script>
    <script type="text/javascript" src="./src/echarts-gl.min.js"></script>
    <script type="text/javascript" src="./src/ecStat.min.js"></script>

    <style>.boxall_2 {margin-top: .1rem;}</style>
</head>

<body>
    <div class="loading" >
        <div class="loadbox"> <img src="./src/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>
            <img src="./src/logo.png"> 
            用电信息大数据实时统计分析
        </h1>
    </div>
    <div class="mainbox" style="margin: 2% 0 0;">
        <ul class="clearfix">
            <li>
                <div class="boxall boxall_1" style="height: 2rem" id="boxall_a">
                    <div class="alltitle">本日工单</div>
                    <div class="wrap">
                            <ul>
                               
                            </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>


                <div class="boxall boxall_2" style="height: 2.3rem" id="boxall_b">
                    <div class="alltitle">重点线路保障</div>
                    <div class="wrap">
                        <ul>
                            <!-- <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li>

                            <li>
                                <p><em>10KV观游线  -  2019/5/15 08:00:00 至 2019/5/15 15:30:00</em><br/>计划停电  -  3876574855  -  2019043202348974</p>
                            </li> -->
                        </ul>
                    </div>
                        
                    <div class="boxfoot"></div>
                </div>
              
            </li>

            <!-- 中间内容 -->
            <li style="transform:translateZ(0) scale(1,1);transform-origin: 0 0 0;">
                    <div class="boxall boxall3" style="height: 8.78rem" id="boxall_c">
                            <div class="alltitle" style="
                            font-size: .3rem;
                            line-height: .6rem;">三维动态展示</div>
                            <div class="wrap" style="height:8rem;">
                                <iframe src="https://akkogear.com"  id="armchatroom" frameborder="0" width="100%" height="100%" scrolling="no" rameborder="0"  allowTransparency="true" ></iframe>
                            </div>
                            <div class="boxfoot"></div>
                    </div>
            </li> 

            <li  >
                <div class="boxall" style="height:2rem" id="boxall_d">
                    <div class="alltitle">动环监控</div>

                    <div class="dhjk">
                        
                        <div class="dhjk_box groupList0"><span class="iconfont icon-wenshidu "></span><em>温湿度</em><i class="">正常</i><p><b class="counter"></b><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList1"><span class="iconfont icon-kongtiao"></span><em>空调</em><i>正常</i><p><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList2"><span class="iconfont icon-upsdianyuan"></span><em>UPS</em><i>正常</i><p><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList3"><span class="iconfont icon-dianbiao"></span><em>电量仪</em><i>正常</i><p><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList4"><span class="iconfont icon-iconset0175"></span><em>开关模块</em><i>正常</i><p><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList5"><span class="iconfont icon-hekricon01" style="line-height: .29rem;padding-bottom: .05rem;"></span><em>PDU</em><i>正常</i><p><em class="counter"></em></p></div>

                        <div class="dhjk_box groupList6"><span class="iconfont icon-thermometer_icon"></span><em>机柜温度</em><i>正常</i><p><em class="counter"></em></p></div>


                    </div>
                    
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall boxall_2" style="height: 2.3rem" id="boxall_e">
                    <div class="alltitle">实时监视信息</div>
                    <div class="wrap" id="wrap_e">
                        <div id="container1" class="btbox btbox01" ></div>
                        <div id="container2" class="btbox btbox02" ></div>
                        <div id="container3" class="btbox btbox03" ></div>
                        <div id="container4" class="btbox btbox04" ></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
        <div class="map">
            <div class="map1"><img src="./src/lbx.png"></div>
            <div class="map2"><img src="./src/jt.png"></div>
            <div class="map3"><img src="./src/map.png"></div>
            <div class="map4" id="map_1" _echarts_instance_="ec_1557038526486" style="-webkit-tap-highlight-color: transparent; user-select: none;"><div style="position: relative; overflow: hidden; width: 1378px; height: 672px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div></div>
        </div>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="./src/js.js"></script>
    <script type="text/javascript" src="./src/echarts.min.js"></script>

    <script type="text/javascript" src="./src/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="./src/jquery.countup.min.js"></script>
    <script type="text/javascript">
        
        var alldata = "";
            var timer;
            var i_a=0;
            function getdata(){
            
            $.ajax({
            type:"post",
            url:"http://118.25.60.252/demo.json",
            dataType:"json",
                success:function(data){
                    alldata = data.data;
                    console.log("data:");
                    console.log(data);
                    // console.log("orderList:"+alldata.orderList.length);
           
                       
                var boxall_ahtml = "";

                for(var a=0; a<alldata.orderList.length; a++){
                    boxall_ahtml += `<li>
                                <p><em>${alldata.orderList[a].BH}&nbsp;&nbsp;——&nbsp;&nbsp;${alldata.orderList[a].ATVD_NAME}</em><br>${alldata.orderList[a].BT}</p>
                            </li>`
                }

                $("#boxall_a .wrap ul").attr("margin-top","0rem");
                $("#boxall_a .wrap ul").html(boxall_ahtml);


clearInterval(timer);
var html_a=$("#boxall_a .wrap ul").html();
$("#boxall_a .wrap ul").append(html_a);
var ls_a=$("#boxall_a .wrap li").length/2+1;

timer = setInterval(()=> {
i_a++
if(i_a==ls_a){
i_a=1
$("#boxall_a .wrap ul").css({marginTop:0})
$("#boxall_a .wrap ul").animate({marginTop:-'.43'*i_a+'rem'},1000)
}
$("#boxall_a .wrap ul").animate({marginTop:-'.43'*i_a+'rem'},1000)
},15000);



if(alldata.groupList[0].AlarmNum != 0){
    $(`.groupList0 span,.groupList0 i`).addClass("err");
    $(`.groupList0 b.counter`).html(alldata.groupList[0].AlarmNum+"/");
    $(`.groupList0 i`).html("报警");
    
}
$(`.groupList0 em.counter`).html(alldata.groupList[0].num);

if(alldata.groupList[1].AlarmNum != 0){
    $(`.groupList1 span,.groupList1 i`).addClass("err");
    $(`.groupList1 b.counter`).html(alldata.groupList[1].AlarmNum);
    $(`.groupList1 i`).html("报警");
}
$(`.groupList1 em.counter`).html(alldata.groupList[1].num);

if(alldata.groupList[2].AlarmNum != 0){
    $(`.groupList2 span,.groupList2 i`).addClass("err");
    $(`.groupList2 b.counter`).html(alldata.groupList[2].AlarmNum);
    $(`.groupList2 i`).html("报警");
}
$(`.groupList2 em.counter`).html(alldata.groupList[2].num);

if(alldata.groupList[3].AlarmNum != 0){
    $(`.groupList3 span,.groupList3 i`).addClass("err");
    $(`.groupList3 b.counter`).html(alldata.groupList[3].AlarmNum);
    $(`.groupList3 i`).html("报警");
}
$(`.groupList3 em.counter`).html(alldata.groupList[3].num);

if(alldata.groupList[4].AlarmNum != 0){
    $(`.groupList4 span,.groupList4 i`).addClass("err");
    $(`.groupList4 b.counter`).html(alldata.groupList[4].AlarmNum);
    $(`.groupList4 i`).html("报警");
}
$(`.groupList4 em.counter`).html(alldata.groupList[4].num);

if(alldata.groupList[5].AlarmNum != 0){
    $(`.groupList5 span,.groupList5 i`).addClass("err");
    $(`.groupList5 b.counter`).html(alldata.groupList[5].AlarmNum);
    $(`.groupList5 i`).html("报警");
}
$(`.groupList5 em.counter`).html(alldata.groupList[5].num);

if(alldata.groupList[6].AlarmNum != 0){
    $(`.groupList6 span,.groupList6 i`).addClass("err");
    $(`.groupList6 b.counter`).html(alldata.groupList[6].AlarmNum);
    $(`.groupList6 i`).html("报警");
}
$(`.groupList6 em.counter`).html(alldata.groupList[6].num);

$('.counter').countUp();

var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
console.log("wclggj:"+alldata.minitorList.wclggj);
console.log("dqggj:"+alldata.minitorList.dqggj);
var app = {};
option = {   
legend: {
    orient: 'vertical',

        left: '55%',

        y: 'center',
        itemWidth: 30,   
        itemHeight: 30, 
        textStyle: {
        color: '#ffffff',
        fontSize: 16
        },
        formatter: function(name) {
                        var index = 0;
                        var clientlabels = ['未处理根告警','当前根报告警'];
                        var clientcounts = [alldata.minitorList.wclggj,alldata.minitorList.dqggj];
                        clientlabels.forEach(function(value,i){
                            if(value == name){
                                index = i;
                            }
                        });
                        return name + "  " + clientcounts[index];
}
        
        
},


series : [
        {
            type: 'pie',
            radius : '100%',
            center : ['30%', '50%'],
            normal: {
                    show: false
            },
            label: {
                show: false
            },
            data:[
                {value:alldata.minitorList.wclggj, name:'未处理根告警'},
                {value:alldata.minitorList.dqggj, name:'当前根报告警'},
            ],
            itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal:{
                                color:function(params) {
                                //自定义颜色
                                var colorList = [          
                                        '#c23531', '#2f4554', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                    }
            
        }
    
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}





var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
var app = {};
option = {   
legend: {
orient: 'vertical',

left: '55%',
y: 'center',
itemWidth: 30,   
itemHeight: 30, 
textStyle: {
color: '#ffffff', 
fontSize: 16
},


formatter: function(name) {
                        var index = 0;
                        var clientlabels = ['未处理缺陷','当前缺陷'];
                        var clientcounts = [alldata.minitorList.wclqx,alldata.minitorList.dqqx];
                        clientlabels.forEach(function(value,i){
                            if(value == name){
                                index = i;
                            }
                        });
                        return name + "  " + clientcounts[index];
}

},
series : [
{
type: 'pie',
radius : '100%',
center : ['30%', '50%'],
normal: {
    show: false
},
label: {
show: false
},
data:[
{value:alldata.minitorList.wclqx, name:'未处理缺陷'},
{value:alldata.minitorList.dqqx, name:'当前缺陷'},
],
itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
             },
            normal:{
                color:function(params) {
                //自定义颜色
                var colorList = [          
                        '#61a0a8', '#d48265', '#FF8C00', '#2f4554', '#FF0000', '#FE8463',
                    ];
                    return colorList[params.dataIndex]
                 }
            }
      }

}






]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}




var dom = document.getElementById("container3");
var myChart = echarts.init(dom);
var app = {};
option = {   
legend: {
orient: 'vertical',

left: '55%',

y: 'center',
itemWidth: 30,   
itemHeight: 30, 
textStyle: {
color: '#ffffff',
fontSize: 16
},


formatter: function(name) {
                        var index = 0;
                        var clientlabels = ['高风险业务','低风险业务'];
                        var clientcounts = [alldata.minitorList.gfxyw,alldata.minitorList.dfxyw];
                        clientlabels.forEach(function(value,i){
                            if(value == name){
                                index = i;
                            }
                        });
                        return name + "  " + clientcounts[index];
}


},
series : [
{
type: 'pie',
radius : '100%',
center : ['30%', '50%'],
normal: {
    show: false
},
label: {
show: false
},
data:[
{value:alldata.minitorList.gfxyw, name:'高风险业务'},
{value:alldata.minitorList.dfxyw, name:'低风险业务'},
],
itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
             },
            normal:{
                color:function(params) {
                //自定义颜色
                var colorList = [          
                        '#FF0000', '#749f83', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                    ];
                    return colorList[params.dataIndex]
                 }
            }
      }

}

]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}





var dom = document.getElementById("container4");
var myChart = echarts.init(dom);
var app = {};
option = {   
legend: {
orient: 'vertical',
left: '55%',
y: 'center',
itemWidth: 30,   
itemHeight: 30, 
textStyle: {
color: '#ffffff',
fontSize: 16
},
formatter: function(name) {
                        var index = 0;
                        var clientlabels = ['已开工检修','当前检修'];
                        var clientcounts = [alldata.minitorList.ykgjx,alldata.minitorList.dqjx];
                        clientlabels.forEach(function(value,i){
                            if(value == name){
                                index = i;
                            }
                        });
                        return name + "  " + clientcounts[index];
}


},
series : [
{
type: 'pie',
radius : '100%',
center : ['30%', '50%'],
normal: {
    show: false
},
label: {
show: false
},
data:[
{value:alldata.minitorList.ykgjx, name:'已开工检修'},
{value:alldata.minitorList.dqjx, name:'当前检修'},
],
itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
             },
            normal:{
                color:function(params) {
                //自定义颜色
                var colorList = [          
                        '#FF8C00', '#bda29a', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                    ];
                    return colorList[params.dataIndex]
                 }
            }
      }

}

]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
                },
                error:function(jqXHR){
                    console.log("Error: "+jqXHR.status);
                    console.log(jqXHR.responseText);
                }
                });
            }
            
            setInterval("getdata()",60000);

            getdata();
       
    </script>
    <script type="text/javascript">
        // $('.counter').countUp();
        // function refresharmchatroom(){
        // var mframe=$('#armchatroom').attr("src");
        // $("#armchatroom").attr("src",mframe);
        // }
        // setInterval("refresharmchatroom()",60000);
    </script>
</body></html>